<template>
  <CustomerForm title="用户信息" @submit="onSubmit" @reset="onReset" class="my-form" ref="formRef">
    <!-- 默认插槽：表单内容 -->
    <div class="row q-col-gutter-md">
      <!-- 邮箱 -->
      <div class="col-12 col-sm-6">
        <div class="row items-center">
          <div class="col-3">
            <label class="form-label required">Email</label>
          </div>
          <div class="col-9">
            <q-input v-model="formData.email" outlined :rules="[(val) => !!val || '请输入邮箱']" />
          </div>
        </div>
      </div>

      <!-- 用户名 -->
      <div class="col-12 col-sm-6">
        <div class="row items-center">
          <div class="col-3">
            <label class="form-label required">用户名</label>
          </div>
          <div class="col-9">
            <q-input
              v-model="formData.username"
              outlined
              :rules="[(val) => !!val || '请输入用户名']"
            />
          </div>
        </div>
      </div>
    </div>

    <!-- 自定义底部按钮 -->
    <template #footer>
      <q-btn label="取消" flat class="q-mr-sm" />
      <q-btn label="保存" type="submit" color="primary" />
    </template>
  </CustomerForm>
</template>

<script setup>
import { ref } from 'vue'
import CustomerForm from '@/components/common/CustomerForm.vue'

const formRef = ref(null)
const formData = ref({
  email: '',
  username: '',
})

const onSubmit = () => {
  console.log('提交表单：', formData.value)
}

const onReset = () => {
  formData.value = {
    email: '',
    username: '',
  }
}
</script>

<style lang="scss" scoped>
.form-label {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 12px;

  &.required:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}
</style>
